<template>
  <div class="com-container">
    <div class="com-chart" id="hot"></div>
    <span class="iconfont arr-left" @click="toLeft()" :style="comStyle">&#xe6ef;</span>
    <span class="iconfont arr-right" @click="toRight" :style="comStyle">&#xe6ed;</span>
    <span class="cat-name" :style="comStyle">{{ title }}</span>
  </div>
</template>

<script setup>
import { onMounted,onBeforeUnmount, inject, reactive, ref, computed, watch } from "vue";
import { getHotData } from '@/service/getChartsData'
import { getThemeValue } from '@/utils/theme_utils'
import { useStore } from 'vuex'

// 1. 接收Echarts
let echarts = inject('echarts')
let chartInstance = reactive({})
// 2. 定义接收数据变量
let chartDate = reactive([])
let seriesData = reactive([])
let legendArr =reactive([])
let titleFontSize = ref(null)
let currentIndex = ref(0)
let titleArr = reactive(['女装', '手机数码', '美妆护肤'])
const store = useStore()

// 适配标题大小
let title = computed(() => {
  return titleArr[currentIndex.value]
})

// 适配图标大小与颜色
let comStyle = computed(() => {
  return {
    fontSize: titleFontSize.value + 'px',
    color: getThemeValue(store.state.theme).titleColor
  }
   
})

async function getChartData() {
  let {data: res} = await getHotData()
  chartDate = res
}

function initChart() {
  chartInstance = echarts.init(document.querySelector("#hot"), store.state.theme)

  const initOption = {
    title: {
      text: '▎ 热销商品的占比',
      left: 20,
      top: 20
    },
    legend: {
      top: '12%',
      icon: 'circle'
    },
    series:{
      type:'pie' // 圆形图
    }

  }
  chartInstance.setOption(initOption)
}

function setChartData(){
  legendArr = chartDate[currentIndex.value].children.map((item) => item.name)

  seriesData = chartDate[currentIndex.value].children.map( item => {
     return {
       name: item.name, // 圆形图的类别
       value: item.value // 圆形图的类别值
     }
  })

}

function updateChart() {
  setChartData()
  const updateOption = {
    series: {
      data: seriesData
    },
    legend: {
      data: legendArr
    }
  }
  chartInstance.setOption(updateOption)
}

function screenAdapter() {
  titleFontSize.value = document.querySelector("#hot").offsetWidth / 100 * 3.6
  const adapterOption = {
    title:{
      textStyle: {
        fontSize: titleFontSize.value
      }
    },
    legend: {
      itemWidth: titleFontSize.value * 1.5,
      itemHeight: titleFontSize.value * 1.5,
      itemGap: titleFontSize.value / 2,
      textStyle: {
        fontSize: titleFontSize.value / 1.5
      }
    },
    series: [
      {
        radius: titleFontSize.value * 4.5,
        center: ['50%', '60%']
      }
    ]
  }
  chartInstance.setOption(adapterOption)
  chartInstance.resize()
}

// 点击左图标饼图向左切换
function toLeft() {
  if (currentIndex.value === 0 ) {
    currentIndex.value = chartDate.length - 1
  }else {
    currentIndex.value--
  }
  updateChart()

}
// 点击右图标饼图向右切换切换
function toRight() {
  if (currentIndex.value === chartDate.length -1 ) {
    currentIndex.value = 0
  }else {
    currentIndex.value++
  }
  updateChart()
}

watch(() => store.state.theme, () => {
  //console.log('主题切换了')
  chartInstance.dispose()//销毁当前的图表
  initChart()//重新初始化图表对象
  updateChart()//更新图表的展示
  screenAdapter()//完成屏幕的适配
})

onMounted(() => {
   getChartData().then(() => {
     initChart()
     updateChart()
     screenAdapter()
   })
  window.addEventListener('resize',screenAdapter)
})

onBeforeUnmount(() => {
  window.removeEventListener('resize',screenAdapter)
})

// 导出 适配函数 以便父组件screenPage使用
defineExpose ({
  screenAdapter
})
</script>

<style scoped>
.arr-left{
  position: absolute;
  left: 10%;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  color: white;
}

.arr-right{
  position: absolute;
  right: 10%;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  color: white;

}

.cat-name {
  position:absolute;
  left: 80%;
  bottom: 20px;
  color: white;
}
</style>